<template>
	<view>
		<view class="u-page">
			<!-- <image src="/static/image/userImg/bg.png" mode="" class="bgImg"></image> -->
			<view class="searchBox mL15 mR15 bgf">
				<u-search placeholder="搜索职位/公司" v-model="query.oddJobName" height="80" :show-action="false" bg-color="#fff"
					shape="square" @change='search'>
				</u-search>
			</view>
			<view class="flex jst-between mL15 mR15 relative mB10 mT15">
				<view class="flex alg-center font14 " :class="query.oddJobType.length>0?'u-blue':'u-3'"
					@click="openJobType">
					<text class="mR10">全部职位</text>
					<u-icon size="20" name="arrow-down-fill" :color="query.oddJobType.length>0?'#3291F8':'#666'"></u-icon>
				</view>
				<view class="flex alg-center">
					<view class="flex alg-center" @click="openJobSort">
						<text class="mR10" :class="query.sort.length>0?'u-blue':'u-3'">排序</text>
						<u-icon size="20" name="arrow-down-fill" :color="query.sort.length>0?'#3291F8':'#666'"></u-icon>
					</view>
					<view class="flex alg-center mL20" @click="openJobSel">
						<text class="mR10" :class="selColor?'u-blue':'u-3'">筛选</text>
						<u-icon size="20" name="arrow-down-fill" :color="selColor?'#3291F8':'#666'"></u-icon>
					</view>
				</view>
			</view>
			<view class="flex flex-wrap  relative mB10  mL15 mR15 pB15">
				<view class="jobTag" :class="item.checked?'checked':''" @click="changeTab(item,i)" v-for="(item,i) in tagLis"
					:key='item.value'>
					{{item.text}}
				</view>
			</view>
			<mescroll-uni class="lisBox tabBarLisBox" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" :up="upOption" :bottombar="false" :top="260" :wxSelfTabbar="true">
				<view>
					<jobItem :list="list"></jobItem>
				</view>
			</mescroll-uni>
		
			<!-- <scroll-view  id="scroll-view-h" :refresher-enabled="false"
				:refresher-threshold="50" :scroll-with-animation='true' @scrolltolower="handleScrollToLower"
				:scroll-y="true">
				<jobItem></jobItem>
				<u-loading class="loading" mode="circle" size="44" v-if="loading" />
			</scroll-view> -->
			<jobType ref="jobType" @getSelV="getSelV"></jobType>
			<jobSel ref="jobSel" @checkSel="checkSel"></jobSel>
			<jobSort ref="jobSort" @updateSelV="changeValue"></jobSort>
		
		</view>
		
		 <xfUserTabbar></xfUserTabbar>
	</view>
	
</template>

<script>
	import jobItem from "@/components/job/jobCard/index.vue"
	import jobType from "@/components/job/jobType/index.vue"
	import jobSel from "@/components/job/jobSel/index.vue"
	import jobSort from "@/components/job/jobSort/index.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	import {
		getLocal
	} from "@/libs/map.js"
	import {
		homeJobLis
	} from '@/api/userInterface/job.js'
	export default {
		mixins: [MescrollMixin],
		components: {
			jobItem,
			jobType,
			jobSel,
			jobSort
		},
		data() {
			return {
				downOption: {
					use: true,
					auto: false
				},
				query: {
					longitude: null,
					latitude: null,
					oddJobName: '',
					sort: '',
					oddReleaseType: '',
					staSalary:'',
					endSalary:'',
					staJobNum:'',
					endJobNum:'',
					salaryPayment: '',
					izTools: '',
					workWay: '',
					oddJobType: "",
					oftenFilter:[],
					pageSize: 10,
					pageNo: 1
				},
				selColor: false,
				upOption: {
					page: {
						num: 0,
						size: 10,
						time: null
					},
					empty: {
						use: true,
						icon: '/static/image/nodata.png',
						tip: "暂无数据",
						fixed: true
					},
					textNoMore: "到底啦~",
				},
				list: [],
				tagLis: [],



			};
		},
		async onReady() {
			const {lat,lon}=await this.xf.getLatOrLon();
			this.query.latitude=lat;
			this.query.longitude=lon;
		},
		onShow(e) {
			this.getFastNav()
		},
		methods: {
			changeTab(item,i){
				this.tagLis[i].checked=!this.tagLis[i].checked;
				if(this.tagLis[i].checked){
					this.query.oftenFilter.push(item.value)
				}else{
					this.query.oftenFilter=this.query.oftenFilter.filter(v=>v!=item.value)
				}
				this.list=[];
				this.markers=[];
				this.mescroll.resetUpScroll();
			},
			//打开全部职位选择框
			openJobType() {
				this.$refs.jobType.openPoup()
			},
			search() {
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			//打开筛选弹窗
			openJobSel() {
				this.$refs.jobSel.openPoup()
			},
			//打开排序弹窗
			openJobSort() {
				this.$refs.jobSort.openPoup()
			},
			//获取顶部tag
			getFastNav() {
				this.baseStore.getDictionaryDataAll('jjp_oddjob_fast_search').then(res => {
					this.tagLis = res.map(v=>{return {...v,checked:false}})
				})
			},
			changeValue(v) {
				this.query[v.type] = v.value;
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			getSelV(v) {
				this.query.oddJobType = v;
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			checkSel(v) {
				this.query = {
					...this.query,
					...v
				};
				this.list = [];
				this.mescroll.resetUpScroll();
				for (let k in v) {
					if (v[k]) {
						this.selColor = true;
						return
					} else {
						this.selColor = false
					}
				}
				
			},
			async upCallback(page) {
				if (page.num == 1) this.list = [];
				this.query.pageNo = page.num;
				homeJobLis(this.query).then(res => {
					let list = res.result.records;
					this.list = this.list.concat(list);
					this.mescroll.endSuccess(res.result.records.length);
				}).catch(err => {
					this.mescroll.endByPage(0, 0);
					this.mescroll.endErr();
				})
			},
		}
	};
</script>
<style lang="scss">
	page {
		/* #ifdef MP-WEIXIN */
		height: 100%;
		/* #endif */
		background: linear-gradient(0deg, #F7F8FB, #E1EEFF);
	}
</style>
<style scoped lang="scss">
	page {
		height: 100%;
		background: linear-gradient(0deg, #F7F8FB, #E1EEFF);
	}

	.bgImg {
		position: absolute;
		height: 400rpx;
		width: 100%;
		z-index: 0;
	}

	.searchBox {
		position: relative;
		z-index: 1;
		border-radius: 10rpx;
	}

	.jobMoney {
		color: #EB392F;
	}

	.jobTag {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #8D8D8D;
		width: 152rpx;
		height: 54rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-right: 27rpx;
		line-height: 54rpx;
		text-align: center;
		border:2rpx solid #fff;
		&:last-child {
			margin-right: 0;
		}

		&.checked {
			color: #3291F8;
			border:2rpx solid  #3291F8;
		}
	}
</style>